<template>
	<view class="">
		<u-popup z-index="1204"  v-model="showCart" @close="close" mode="bottom" border-radius="20">
			<view class="cert-list-box">
				<view class="header w100">
					<view class="u-text-center fs28 c3 fw5">
						配送费明细
						<view class="fs24 c6">
							最终配送费金额轻易确认订单页为准
						</view>
					</view>
					<view  @click="close" class="close">
						<u-icon name="close"></u-icon>
					</view>
				</view>
				<view class="other-info fs26 p30s">
					<view class="df aic jcsb other-info-item"> <text class="c6">总配送费</text> <text class="price fw5">¥{{infoByAreaIdFee.sendMoney||0}}</text> </view>
					<scroll-view style="max-height: 600rpx;" :scroll-y="true">
						<view class="item fs24 mb20" v-for="item in goodsList">
							<view class="df aic jcsb p20">
								<view :class="item.sign!=''?'price':'app-theme'">
									<text>{{item.sign!=''?'商家配送':'平台配送'}}</text>
								</view>
								<view class="">
									共<text class="app-theme">{{item.goodsList.length}}</text>件，总计<text class="app-theme">{{checkFeeInfo(item.sign).weight}}</text>kg
								</view>
							</view>
							<view class="df aic p020">
								<u-image borderRadius="10" class="mr20" width="100" height="100" :src="good.image" v-for="good in item.goodsList"></u-image>
							</view>
							<view class="mt20 c6 ml20">
								<text class="app-theme">{{checkFeeInfo(item.sign).bSendRange.baseLimit}}</text>kg以内<text class="price">{{checkFeeInfo(item.sign).bSendRange.sendMoney}}</text>元，续重<text class="price">{{checkFeeInfo(item.sign).bSendRange.eachSendPrice}}</text>元/kg
								<u-icon name="question-circle" color="#48A147" class="ml5" @click="$emit('feeInfo')"></u-icon>
							</view>
							<u-line margin="20rpx 0" color="#48A147" border-style="dashed" />
							<view class="u-text-right mr20 pb20">
								<view class="">
									基础费用：<text class="price fw5">{{checkFeeInfo(item.sign).bSendRange.sendMoney}}</text>元
								</view>
								
								<view class="mt10">
									续重费用：<text class="price fw5">
										{{checkPrice(checkFeeInfo(item.sign))}}
										</text>元
								</view>
								<view class="mt10">
									总计费用：<text class="price fw5">{{checkFeeInfo(item.sign).sendMoney}}</text>元
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view v-if="isAir" class="df aic jcsa pb20 mdbJr" :style="{'height':120+(platformFeeInfo.sendLimit?70:0)+'rpx'}">
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import Decimal from "decimal.js";
	export default{
		props:{
			value: {
				type: Boolean,
				default: false
			},
			isAir: {
				type: Boolean,
				default: true
			},
			infoByAreaIdFee:{},
			platformFeeInfo:{},
			goodsList:[]
		},
		// computed:{
		// 	payAmountFee(){
		// 		let priceAll = new Decimal(this.priceAll);
		// 		const deliveryFee = new Decimal(Number(this.sendPirce));
		// 		return new Decimal(priceAll.add(deliveryFee)).toFixed(2)
		// 	}
		// },
		watch: {
			value: {
				immediate: true,
				deep: true,
				handler(e) {
					console.log(e)
					this.showCart = e
				},
		
			}
		},
		data(){
			return{
				showCart:false,
				loading:false
			}
		},
		methods:{
			checkPrice(e){
				let eachSendPrice = new Decimal(e.bSendRange&&e.bSendRange.eachSendPrice||0)
				let weight= new Decimal(e.weight||0)
				let base_weight= new Decimal(e.bSendRange&&e.bSendRange.baseLimit||0)
				let difference = weight.sub(base_weight).toFixed(2)
				if(difference<=0)return 0
				let total = new Decimal(difference).mul(eachSendPrice).toFixed(2)
				return `${difference}*${eachSendPrice}=${total}`
			},
			checkFeeInfo(e){
				let info = {
							sendLimit:0,
							diff:0
						}
				if(this.infoByAreaIdFee.childList.length&&this.infoByAreaIdFee.childList.find(_e =>_e.sign==e)){
					let res = this.infoByAreaIdFee.childList.find(_e =>_e.sign==e)
					return res
				}else{
					return info
				}
				
			},
			close(){
				this.$emit('input',false)
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	.item{
		background: #F0FFF0;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding-bottom: 0rpx;
	}
	$theme-text: #47A848;
	.red-price{
		color: #EC3234;
	}
	.goods-list{
		padding: 30rpx;
		.goods-item{
			padding: 20rpx 0;
			border-bottom: 1rpx dashed #E5E5E5;
				
			view{
				width: 33.3%;
			}
		}
		.noborder{
			border-width: 0 !important;
		}
	}
	.other-info{
		padding: 30rpx;
		padding-top: 0;
		.other-info-item{
			padding: 20rpx 0;
		}
		.other-info-item-time{
			padding: 20rpx 0 0;
		}
		
	}

	.num-box {
		color: $theme-text;

		.num {
			color: #EF2929;
		}
	}
	.close{
		position: absolute;right: 30rpx;top: 30rpx;
	}
	.cert-list-box {
		.header {
			padding: 24rpx 30rpx;

			border-bottom: 2rpx solid #E5E5E5;

			.title {
				font-family: PingFang SC-Bold;
				font-weight: bold;
			}
		}
	}

</style>